<template>
    <div class="app-container">
        <div class="topform">
            <el-form :model="QueryForm" @submit.native.prevent>
                <el-form-item label="客户姓名：" label-width="90px" style="width: 250px;float: left">
                    <el-input
                            v-model="QueryForm.user_name"
                            clearable
                            autocomplete="off"
                            placeholder="请输入客户姓名"/>
                </el-form-item>
                <el-form-item label="机器名称：" label-width="90px" style="width: 250px;float: left">
                    <el-input
                            v-model="QueryForm.mch_name"
                            clearable
                            autocomplete="off"
                            placeholder="请输入机器名称"/>
                </el-form-item>
                <el-form-item label="机器SN：" label-width="90px" style="width: 250px;float: left">
                    <el-input
                            v-model="QueryForm.mch_sn"
                            clearable
                            autocomplete="off"
                            placeholder="请输入机器SN"/>
                </el-form-item>
                <el-form-item label="提交人：" label-width="90px" style="width: 200px;float: left">
                    <el-select clearable v-model="QueryForm.customer_uid" placeholder="请选择提交人">
                        <el-option label="全部" value=""></el-option>
                        <el-option v-for="item in customers" :label="item.u_name" :value="item.uid"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="提交时间：" label-width="90px" style="width: 450px;float: left">
                    <el-date-picker
                            style="float: left;width: 45%"
                            v-model="QueryForm.addtime_sdt"
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd"
                            clearable
                            type="date"
                            placeholder="请选择开始提交时间">
                    </el-date-picker>
                    <div style="float: left;margin: 0 5px">至</div>
                    <el-date-picker
                            style="float: left;width: 45%"
                            v-model="QueryForm.addtime_edt"
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd"
                            clearable
                            type="date"
                            placeholder="请选择结束提交时间">
                    </el-date-picker>
                </el-form-item>
                <div style="float: left">
                    <el-button native-type="submit" type="primary" style="margin-left: 5px"
                               icon="el-icon-search"
                               @click="Query(true)">搜索
                    </el-button>
                    <el-button type="primary"
                               @click="excel(true)">导出
                    </el-button>
                </div>
            </el-form>
        </div>
        <el-table
                header-cell-class-name="tableheader"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.8)"
                element-loading-text="加载中···"
                v-loading="Loading"
                :data="list"
                border
                fit>
            <el-table-column align="center" label="提交时间">
                <template slot-scope="scope">
                    {{ scope.row.screenshot_subtime }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="提交人">
                <template slot-scope="scope">
                    {{ scope.row.customer_uname }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="客户姓名">
                <template slot-scope="scope">
                    {{ scope.row.user_name }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="质保开始时间">
                <template slot-scope="scope">
                    {{ scope.row.mch_assurance_sdt }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="机器SN">
                <template slot-scope="scope">
                    {{ scope.row.mch_sn }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="机器名称">
                <template slot-scope="scope">
                    {{ scope.row.mch_name }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="机器类型">
                <template slot-scope="scope">
                    {{ scope.row.mch_type }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" plain @click.stop="photoDetails(scope.row)">照片详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination
                    style="text-align: center"
                    layout="prev, pager, next"
                    small
                    :current-page="QueryForm.page"
                    :page-size="QueryForm.pagesize"
                    :total="total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
            </el-pagination>
        </div>
        <el-dialog :close-on-click-modal="false" title="照片详情" :visible.sync="photoDetailsdialog" width="65%">
            <el-form label-width="150px">
                <el-form-item label="微信记录截屏：">
                    <div class="clearfix">
                        <div v-for="item in wxrecord_screenshot"
                             style="width:200px;height:230px;float: left;margin-left: 5px;text-align: center">
                            <div style="width: 175px;height: 175px;position: relative">
                                <img style="cursor:pointer;max-width: 150px;max-height: 150px;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto"
                                     :src="item" @click="opendialog(item)" alt="">
                            </div>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="理货后售货机照片：">
                    <div class="clearfix">
                        <div v-for="item in tallyafter_screenshot"
                             style="width:200px;height:230px;float: left;margin-left: 5px;text-align: center">
                            <div style="width: 175px;height: 175px;position: relative">
                                <img style="cursor:pointer;max-width: 150px;max-height: 150px;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto"
                                     :src="item" @click="opendialog(item)" alt="">
                            </div>
                        </div>
                    </div>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog :visible.sync="dialogVisible" :append-to-body="true">
            <div style="text-align: center">
                <img style="max-width: 600px;max-height: 600px " :src="dialogImageUrl" alt="">
            </div>
        </el-dialog>
    </div>
</template>

<script type="es6">
import Cookies from "js-cookie";

export default {
    data() {
        return {
            QueryForm: {
                user_name: '',
                mch_name: '',
                mch_sn: '',
                customer_uid: '',
                addtime_sdt: '',
                addtime_edt: '',
                isPage: true,
                page: 1,
                pagesize: 17,
            },
            photoDetailsdialog: false,
            dialogVisible: false,
            dialogImageUrl: '',
            wxrecord_screenshot: [],
            tallyafter_screenshot: [],
            customers: [],
            list: [],
            total: 0,
            Loading: true,
        };
    },
    created() {
        this.Query();
        this.getcustomer();
    },
    methods: {
        Query(isquery) {
            if (isquery === true) {
                this.QueryForm.page = 1
            }
            this.$post(this.$api + '/RK/get_customer_pic_for_excel', this.QueryForm)
                .then((res) => {
                    this.Loading = false;
                    if (res.code === 0) {
                        this.list = res.rows;
                        this.total = res.total;
                        for (var i in this.list) {
                            if (this.list[i].screenshot_subtime !== null) {
                                this.list[i].screenshot_subtime = this.list[i].screenshot_subtime.substring(0, 10)
                            }
                            if (this.list[i].mch_assurance_sdt !== null) {
                                this.list[i].mch_assurance_sdt = this.list[i].mch_assurance_sdt.substring(0, 10)
                            }
                        }
                    } else {
                        this.$notify({
                            title: '失败',
                            message: res.msg,
                            type: 'error'
                        });
                    }
                });
        },
        getcustomer() {
            this.$get(this.$api + '/repair/get_customer_userlist', {
                'lv': 'customer',
            })
                .then((res) => {
                    if (res.code === 0) {
                        this.customers = res.data
                    } else {
                        this.$notify({
                            title: '失败',
                            message: res.msg,
                            type: 'error'
                        });
                    }
                });
        },
        photoDetails(item) {
            this.photoDetailsdialog = true;
            this.wxrecord_screenshot = JSON.parse(item.wxrecord_screenshot);
            this.tallyafter_screenshot = JSON.parse(item.tallyafter_screenshot);
        },
        excel() {
          this.$downloadpost(this.$api + '/RK/down_customer_pic_for_excel', this.QueryForm, true)
        },
        handleSizeChange(v) {
            this.QueryForm.pagesize = v;
            this.Query();
        },
        handleCurrentChange(v) {
            this.QueryForm.page = v;
            this.Query();
        },
        opendialog(item) {
            this.dialogVisible = true;
            this.dialogImageUrl = item;
        },
    }
};
</script>
